import React, { useState } from 'react';

const UseStateView = () => {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ age: 0 })
  const [list, setList] = useState([])
  const [tags, setTags] = useState(() => ['html', 'css'])

  let arrComponent = [];
  tags.forEach(el => {
    arrComponent.push(<p key={el} >{el}</p>)
  })

  // 如果函数写在组件外，是不能获取组件内的状态的。
  const addTagHandler = () => {
    // setTags([...tags, 'js'])
    setTags((preState) => {
      console.log(preState)
      return [...preState, 'js']
    })
  }
  return (
    <div>
      <div><button type='button' onClick={addTagHandler}>add tags</button></div>
      {arrComponent}
    </div>
  );
}

export default UseStateView;
